<template>
	<view class="cooperate">
		<view class="forms">
			<view class="title">商务合作申请</view>
			<view class="form">
				<view class="formLine dFlex jBetween_aCenter">
					<view class="lineTit">公司全称</view>
					<view class="lineVal">
						<input type="text" v-model="info.company" placeholder="请输入公司全称"/>
					</view>
				</view>
				<view class="formLine dFlex jBetween_aCenter">
					<view class="lineTit">所属行业</view>
					<view class="lineVal">
						<input type="text" v-model="info.industry" placeholder="请输入所属行业"/>
					</view>
				</view>
				<view class="formLine dFlex jBetween_aCenter">
					<view class="lineTit">经营地址</view>
					<view class="lineVal">
						<input type="text" v-model="info.address" placeholder="请输入详细的经营地址"/>
					</view>
				</view>
				<view class="formLine dFlex jBetween_aCenter">
					<view class="lineTit">联系人</view>
					<view class="lineVal">
						<input type="text" v-model="info.name" placeholder="请输入联系人"/>
					</view>
				</view>
				<view class="formLine dFlex jBetween_aCenter">
					<view class="lineTit">联系电话</view>
					<view class="lineVal">
						<input type="number" v-model="info.mobile" placeholder="请输入联系电话"/>
					</view>
				</view>
				<view class="formLine dFlex jBetween_aCenter">
					<view class="lineTit">补充说明</view>
					<view class="lineVal">
						<input type="text" v-model="info.illustrate" placeholder="请输入补充说明"/>
					</view>
				</view>
			</view>
			<view class="sub" @click="subInfo">确认提交</view>
		</view>
	</view>
</template>

<script>
	import {
		cooperate
	} from '@/tools/http.js';
	export default {
		data() {
			return {
				info:{
					company:'',
					industry:'',
					address:"",
					name:'',
					mobile:'',
					illustrate:'',
				}
			};
		},
		methods:{
			// 保存信息
			async subInfo(){
				for(let i in this.info){
					if(!this.info[i]){
						uni.showToast({
							title:'信息填写不完整',
							icon:"none"
						})
						return;
					}
				}
				let res = await cooperate(this.info);
				if(res){
					uni.showToast({
						title:'信息已提交',
						icon:"success"
					})
					this.info = {
						company:'',
						industry:'',
						address:"",
						name:'',
						mobile:'',
						illustrate:'',
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	.cooperate{
		width:100%;
		padding:12px;
		box-sizing: border-box;
		.forms{
			width:100%;
			padding:0 10px;
			box-sizing: border-box;
			border-radius: 4px;
			background: white;
			overflow: hidden;
			.sub{
				width:100%;
				color:white;
				text-align: center;
				padding:8px 0;
				background: #F4F4F4 linear-gradient(180deg, #3E8EF0 0%, #1362C9 100%);
				border-radius: 50px;
				margin-bottom: 15px;
			}
			.form{
				width:100%;
				margin-bottom: 20px;
				.formLine{
					width:100%; 
					padding:10px 0;
					border-bottom: 1px solid #E6E6E6;
					.lineVal{
						width:60%;
						input{
							text-align:right;
						}
					}
					.lineTit{
						width: 100px;
					}
				}
			}
			.title{
				width:100%;
				text-align: center;
				font-size: 16px;
				font-weight: bold;
				padding: 10px 0;
			}
		}
	}
</style>
